<template>
  <div>
    <van-loading
      size="24px"
      color="#0094ff"
      vertical
      v-if="loading"
    >加载中...</van-loading>
    <div v-if="!loading">

      <div style="padding:25px;background: #70b0eb;">
        <van-row>
          <van-col span="7">
            <div style="padding-left:20px">
              <van-image
                fit="cover"
                width="50px"
                height="50px"
                :src="require('./icon/head.png')"
              />
            </div>
          </van-col>
          <van-col span="11">
            <div>
              <van-row style="color:#FFF;font-size: 20px;">
                {{content.userName}}
              </van-row>
              <van-row style="color:#FFF;">
                {{content.userCompany}}
              </van-row>
            </div>
          </van-col>
        </van-row>

      </div>
      <div style="padding: 20px;border-bottom: 10px solid #e4e4e9;">
        <van-row>
          <van-col
            @click="toList(0)"
            span="6"
            style="text-align: center;"
          >
            <span class="number">{{content.untreatedNum}}</span>
            <span>单</span>
          </van-col>
          <van-col
            span="6"
            @click="toList(1)"
            style="text-align: center;"
          >
            <span class="number">{{content.doneNum}}</span>
            <span>单</span>
          </van-col>
          <van-col
            span="6"
            style="text-align: center;"
            @click="toList(2)"
          >
            <span class="number">{{content.feedBackNum}}</span>
            <span>单</span>
          </van-col>
          <van-col
            span="6"
            @click="toInt"
            style="text-align: center;"
          >
            <span class="number">{{content.integrate}}</span>
            <span>分</span>
          </van-col>
        </van-row>
        <van-row>
          <van-col
            span="6"
            style="text-align: center;"
          >
            处理中
          </van-col>
          <van-col
            span="6"
            style="text-align: center;"
          >
            已处理
          </van-col>
          <van-col
            span="6"
            style="text-align: center;"
          >
            我的反馈
          </van-col>
          <van-col
            span="6"
            style="text-align: center;"
          >
            我的积分
          </van-col>
        </van-row>
      </div>
      <div style="padding:30px;">
        <van-grid
          :border="false"
          :column-num="4"
        >
          <van-grid-item @click="toForm(1)">
            <van-image
              fit="cover"
              width="50px"
              height="50px"
              :src="require('./icon/zx.png')"
            />
            <span style="margin-top:5px;">我要咨询</span>
          </van-grid-item>
          <van-grid-item @click="toForm(2)">
            <van-image
              fit="cover"
              width="50px"
              height="50px"
              :src="require('./icon/jy.png')"
            />
            <span style="margin-top:5px;">我要建议</span>

          </van-grid-item>
          <van-grid-item @click="toForm(3)">
            <van-image
              fit="cover"
              width="50px"
              height="50px"
              :src="require('./icon/ts.png')"
            />
            <span style="margin-top:5px;">我要投诉</span>

          </van-grid-item>

          <van-grid-item @click="toForm(4)">
            <van-image
              fit="cover"
              width="50px"
              height="50px"
              :src="require('./icon/jb.png')"
            />
            <span style="margin-top:5px;">我要举报</span>
          </van-grid-item>
          <van-grid-item @click="toTx()">
            <van-image
              fit="cover"
              width="50px"
              height="50px"
              :src="require('./icon/diannao.png')"
            />
            <span style="margin-top:5px;">线上维权</span>

          </van-grid-item>
          <van-grid-item
            @click="toAll"
            v-if="content.isAdmin == 'Y'"
          >
            <van-image
              fit="cover"
              width="50px"
              height="50px"
              :src="require('./icon/all.png')"
            />
            <span style="margin-top:5px;">回复反馈</span>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>

</template>
<script>
import * as dd from 'dingtalk-jsapi'
import { Notify } from 'vant'

export default {
  data() {
    return {
      content: {},
      loading: false
    }
  },
  mounted() {
  //   // localStorage.setItem('linkId', 24662)

  //   // localStorage.setItem('linkId', 17830)

    // this.loadData()
    let that = this
    dd.ready(function () {
      dd.runtime.permission
        .requestAuthCode({
          corpId: 'ding8bac6beff1d2d841', // 企业id
          onSuccess: function (info) {
            let code = info.code // 通过该免登授权码可以获取用户身份
            that.$http({
                url: '/api/gateway/basemgt-feedback/feedback/auth',
                method: 'post',
                params: {
                  code: code
                },
                data: {
                  code: code
                }
              })
              .then(data => {
                if (data.success) {
                  localStorage.setItem('linkId', data.data)
                  that.loadData()
                } else {
                  that.$toast(data.msg)
                }
              })
          },
          onFail: function (err) {}
        })
        .catch(err => {
          console.log(err)
          alert(err)
        })
    })
  },
  computed: {
    linkId() {
      return localStorage.getItem('linkId')
    }
  },
  created: function () {
    document.title = '员工反馈'
  },
  methods: {
    toForm(num) {
      this.$router.push({ path: 'form', query: { type: num, mobile: this.content.mobile, userName: this.content.userName } })
    },
    toTx() {
      this.$router.push({ path: 'tx', query: { mobile: this.content.mobile, userName: this.content.userName } })
    },
    toList(num) {
      this.$router.push({ path: 'list', query: { type: num } })
    },
    toInt() {
      this.$router.push({ path: 'integrate' })
    },
    toAll() {
      this.$router.push({ path: 'all' })
    },
    loadData() {
      this.loading = true
      try {
        this.$http({
          url: '/api/gateway/basemgt-feedback/feedback/index',
          method: 'get',
          params: {
            linkId: this.linkId
          }
        }).then(data => {
          if (data.code == 200) {
            this.content = data.data
          } else {
            Notify({ type: 'warning', message: data.msg })
          }
        })
      } catch (error) {
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.number {
  color: #70b0eb;
  font-size: 30px;
  font-family: 'vant-icon';
}
.van-loading {
  top: 100px;
}
</style>>
